<template>
	<div>
		<div class="car-list" v-for="(usedcar,index) in usedcarList" :key="index">
			<div style="display: flex; flex-direction: row;" @click="onDetailBtn(usedcar.id)">
				<div>
					<van-image width="160px" height="100px" fit="contain" v-bind:src="usedcar.img" />
				</div>
				<div style="display: flex; flex-direction: column; justify-content: space-between">
					<p class="car-list-title">{{usedcar.carBrand}} {{usedcar.carSeries}}
						{{usedcar.carYear}}
						{{usedcar.carDisplacement}}
						{{usedcar.engine}}
						{{usedcar.carVersion}} {{usedcar.transmission}}
					</p>
					<p class="car-list-info">{{usedcar.licenseTime}}年/{{usedcar.driveMileage}}万公里</p>
					<div style="width: 100%; display: flex;">
						<p class="car-list-price">{{usedcar.price}} 万</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array
			}
		},
		data() {
			return {
				usedcarList: this.data,
				state: {
					loading: false,
					finished: false
				}
			}
		},
		watch: {
			data(val) {
				return this.usedcarList = val
			}
		},
		methods: {
			onDetailBtn(value) {
				this.$emit('onBtnClick', value)
			}
		}
	}
</script>

<style scoped>
	.van-image {
		margin: 10px 5px 5px 5px;
	}

	.car-list {
		display: flex;
		flex-direction: row;
	}

	.car-list-title {
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		margin: 10px 0px;
	}

	.car-list-info {
		text-align: left;
		color: #969799;
		font-size: 14px;
		margin: 0px;
	}

	.car-list-price {
		width: 60%;
		text-align: left;
		color: #ff0000;
		font-size: 18px;
		margin: 5px 0px;
	}
</style>
